<template>
  <div class="fillcontain">
    <bt-col-header title="规则运行日志"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="120px">
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="场景名称">
              <el-select v-model="dataForm.interfaceIdentify" filterable clearable placeholder="请选择">
                <el-option v-for="item in interfaces" :key="item.sceneIdentify" :label="item.sceneName" :value="item.sceneIdentify">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!--      <el-form-item label="请求时间">-->
        <!--        <el-date-picker-->
        <!--          v-model="time"-->
        <!--          type="daterange"-->
        <!--          range-separator=" 至 "-->
        <!--          value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--          :default-time="['00:00:00', '23:59:59']"-->
        <!--          start-placeholder="开始日期"-->
        <!--          end-placeholder="结束日期">-->
        <!--        </el-date-picker>-->
        <!--      </el-form-item>-->
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
          </div>
        </div>
      </el-form>
      <div class="">
        <!-- 操作按钮 -->
        <!-- <div class="btn-padding left">
            <el-button type="info" plain @click="createCaseDemo()">生成案例</el-button>
        </div> -->

        <el-tabs class="tab-container" type="border-card" v-model="activeTab" @tab-click="tabClick">
          <el-tab-pane :label="'默认测试'" :name="'default'"></el-tab-pane>
          <template v-for="(env,index) in envList">
            <el-tab-pane :label="env.environmentName" :name="env.environmentCode"></el-tab-pane>
          </template>
        </el-tabs>

        <!-- 列表 -->
        <div class="table_container">
          <el-table :data="dataList" tooltip-effect="dark" highlight-current-row header-cell-class-name="table-header-class" empty-text="无符合查询条件任务" style="width: 100%; ">

            <el-table-column header-align="center" width="50" align="center">
              <template slot-scope="scope">
                <el-radio :label="scope.$index" v-model="checkLog" @change.native="getRow(scope.$index,scope.row)">&nbsp;</el-radio>
              </template>
            </el-table-column>

            <el-table-column prop="sceneName" header-align="center" align="center" width="180" show-overflow-tooltip label="场景名称">
              <template slot-scope="scope">
                {{scope.row.sceneName}}-{{scope.row.sceneIdentify}}
              </template>
            </el-table-column>
            <el-table-column prop="beginTime" header-align="center" align="center" show-overflow-tooltip label="开始时间">
              <template slot-scope="scope">
                {{scope.row.beginTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" header-align="center" align="center" show-overflow-tooltip label="结束时间">
              <template slot-scope="scope">
                {{scope.row.endTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column prop="batchNo" header-align="center" align="center" show-overflow-tooltip label="流水号">
            </el-table-column>
            <el-table-column prop="ip" header-align="center" align="center" show-overflow-tooltip label="请求IP">
            </el-table-column>
            <el-table-column header-align="center" align="center" width="300" label="操作">
              <template slot-scope="scope">
                <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="showTxt(scope.row)">查看报文
                </el-button>
                <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="showLogDetail(scope.row)">
                  执行日志
                </el-button>
                <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="showSceneList(scope.row)">
                  查看规则日志
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination 
          class="float-right mt-2" 
          @size-change="sizeChangeHandle" 
          @current-change="currentChangeHandle" 
          :current-page="page.pageIndex" 
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="page.pageSize" 
          :total="page.totalPage" 
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!--场景报文-->
        <el-dialog title="场景报文" width="80%" :close-on-click-modal="false" :visible.sync="showTxtVisible">
          <el-row>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  请求报文
                </div>
                <div class="temp_content">
                  <pre>{{req}}</pre>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  返回报文
                </div>
                <div class="temp_content">
                  <pre>{{res}}</pre>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </el-dialog>

        <!--场景规则日志日志-->
        <el-dialog title="场景规则日志日志" width="80%" :close-on-click-modal="false" :visible.sync="showSceneVisible">
          <el-row>
            <el-table :data="ruleLogList" border style="width: 100%; ">
              <el-table-column type="index" header-align="center" width="50" label="序号">
              </el-table-column>
              <el-table-column prop="groupName" header-align="center" align="center" width="180" label="规则组名称">
              </el-table-column>
              <el-table-column prop="groupIdentify" header-align="center" align="center" label="规则组标识">
              </el-table-column>
              <el-table-column prop="beginTime" header-align="center" align="center" label="开始时间">
                <template slot-scope="scope">
                  {{scope.row.beginTime | dateFormat}}
                </template>
              </el-table-column>
              <el-table-column prop="endTime" header-align="center" align="center" label="结束时间">
                <template slot-scope="scope">
                  {{scope.row.endTime | dateFormat}}
                </template>
              </el-table-column>
              <el-table-column prop="resultStatus" header-align="center" align="center" label="结果">
                <template slot-scope="scope">
                  <span v-if="scope.row.resultStatus===0">未通过</span>
                  <span v-if="scope.row.resultStatus===1">通过</span>
                </template>
              </el-table-column>

              <!--            <el-table-column-->
              <!--              header-align="center"-->
              <!--              align="center"-->
              <!--              width="150"-->
              <!--              label="操作">-->
              <!--              <template slot-scope="scope">-->
              <!--                <el-button v-if="scope.row.resultStatus===1" type="text" size="small" @click="showResult(scope.row)">-->
              <!--                  查看结果-->
              <!--                </el-button>-->
              <!--              </template>-->
              <!--            </el-table-column>-->
            </el-table>
          </el-row>

        </el-dialog>

        <el-dialog title="场景执行结果" width="80%" :close-on-click-modal="false" :visible.sync="showResultVisible">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">

                </div>
                <div class="temp_content">
                  <pre>{{result}}</pre>
                </div>
              </el-card>
            </el-col>

          </el-row>

        </el-dialog>

        <!--执行日志-->
        <el-dialog title="日志详情" width="80%" :close-on-click-modal="false" :visible.sync="showDetailVisible">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">

                </div>
                <div class="temp_content">
                  <pre>{{logDetailTex}}</pre>
                </div>
              </el-card>
            </el-col>

          </el-row>

        </el-dialog>
      </div>
    </div>
    
  </div>
</template>

<script>
import { pageList, listRuleLog, logDetail, reqByEnv, createCase } from '@/api/log'
import { listData } from '@/api/baseConfig/environment'
import { listScene } from '@/api/ruleConfig/scene'
import constant from "../../../../api/constant";

export default {
  data() {
    return {
      selectRow: null,
      checkLog: true,
      activeUrl: '',
      time: null,
      interfaces: [],
      dataForm: {
        interfaceIdentify: '',
        beginTime: null,
        endTime: null
      },
      result: '',
      req: '',
      res: '',
      dataList: [],
      ruleLogList: [],
      envList: [],
      dataListLoading: false,
      showTxtVisible: false,
      showSceneVisible: false,
      showResultVisible: false,
      showDetailVisible: false,
      activeTab: 'default',
      logDetailTex: '',
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  components: {},
  activated() {
    this.initData()
  },
  methods: {
    getRow(index, row) {
      // console.log(index)
      this.selectRow = row
    },
    createCaseDemo() {
      if (!this.selectRow) {
        this.$message.error("请选择要生成案例的日志")
        return
      }
      let url = this.activeUrl + "/log/logDetail"
      let params = {
        activeTab: this.activeTab,
        data: JSON.stringify(this.selectRow),
        url: url,
      }
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      createCase(params).then(res => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if (res.data.resultCode === 0) {
          this.$message.success("生成案例成功");
        } else {
          this.$message.error("生成案例失败");
        }
      }).catch(err => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      })
    },
    //初始化场景和环境信息
    initData() {
      listScene({}).then(res => {
        this.interfaces = res.data.data
      })
      listData({}).then(res => {
        this.envList = res.data.data
      })
    },
    //tab点击事件
    tabClick(tab) {
      this.dataList = []
      this.page.totalPage = 0
      this.page.pageIndex = 1

      let url = ''
      this.envList.forEach(item => {
        if (item.environmentCode === this.activeTab) {
          url = item.environmentUrl
        }
      })
      let splits = url.split(',')
      url = splits[0]
      this.activeUrl = url

    },

    showResult(row) {
      let r = JSON.parse(row.result)
      this.result = JSON.stringify(r, null, 4)
      this.showResultVisible = true
    },

    //查看报文
    showTxt(row) {
      debugger
      let req = row.req
      let res = row.res
      if (this.activeTab === 'default') {
        logDetail({ path: req }).then(res => {
          if (res.data.data) {
            this.req = JSON.stringify(JSON.parse(res.data.data), null, 4)
          }
        })
        logDetail({ path: res }).then(res => {
          if (res.data.data) {
            this.res = JSON.stringify(JSON.parse(res.data.data), null, 4)
          }
        })
      } else {
        let url = this.activeUrl + "/log/logDetail"
        reqByEnv({ path: req, url: url }).then(res => {
          if (res.data.data) {
            this.req = JSON.stringify(JSON.parse(res.data.data), null, 4)
          }
        })
        reqByEnv({ path: res, url: url }).then(res => {
          if (res.data.data) {
            this.res = JSON.stringify(JSON.parse(res.data.data), null, 4)
          }
        })
      }

      this.showTxtVisible = true
    },
    //执行日志
    showLogDetail(row) {
      // console.log(row)
      let params = {
        path: row.excutionLog
      }
      if (this.activeTab === 'default') {
        logDetail(params).then(res => {
          this.logDetailTex = res.data.data
          // console.log(this.logDetailTex)
        })
      } else {
        let url = this.activeUrl + "/log/logDetail"
        reqByEnv({ path: row.excutionLog, url: url }).then(res => {
          if (res.data.data) {
            this.logDetailTex = res.data.data
          }
        })
      }
      this.showDetailVisible = true
    },

    //查看规则日志
    showSceneList(row) {
      // console.log(row)
      let params = {
        sceneIdentify: row.sceneIdentify,
        batchNo: row.batchNo
      }
      if (this.activeTab === 'default') {
        listRuleLog(params).then(res => {
          this.ruleLogList = res.data.data
        })
      } else {
        params.url = this.activeUrl + "/log/listGroupByScene"
        reqByEnv(params).then(res => {
          this.ruleLogList = res.data.data
        })
      }
      this.showSceneVisible = true
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val
      this.page.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val
      this.getDataList()
    },

    // 获取数据列表
    getDataList() {
      if (this.time) {
        this.dataForm.beginTime = this.time[0]
        this.dataForm.endTime = this.time[1]
      } else {
        this.dataForm.beginTime = null
        this.dataForm.endTime = null
      }

      this.dataListLoading = true
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        interfaceIdentify: this.dataForm.interfaceIdentify,
        beginTime: this.dataForm.beginTime,
        endTime: this.dataForm.endTime
      }
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      if (this.activeTab === 'default') {
        pageList(params).then(res => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          this.dataListLoading = false
          this.dataList = res.data.data.list
          this.page.totalPage = res.data.data.totalCount
        }).catch(err => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
      } else {

        params.url = this.activeUrl + "/log/pageScene"
        reqByEnv(params).then(res => {
          this.dataListLoading = false
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          this.dataList = res.data.data.list
          this.page.totalPage = res.data.data.totalCount
        }).catch(err => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
      }
    }

  },
  filters: {
    dateFormat(value) {
      return constant.dateFormat('YYYY-mm-dd HH:MM:SS', value)
    }
  }
}
</script>
<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.temp_content {
  height: 500px;
  overflow-y: auto;
}
.tab-container {
  margin: 10px 0;
}
.tab-container /deep/.el-tabs__content {
  display: none;
}
</style>
